<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
         <top></top>

        <div class="body-box">
          <dv-border-box-1>
            <div class="body-box-item" style="padding: 16px">
              <div class="contentBox">
                <div class="content-box-item">
                  <div class="leftItem">
                    <dv-border-box-13>
                      <centerLeft1 />
                    </dv-border-box-13>
                  </div>
                  <div class="leftItem">
                    <dv-border-box-13>
                      <div class="box-item">
                        <div class="bg-color-black">
                          <div class="d-flex pt-2 pl-2">
                            <span>
                              <icon name="chart-line" class="text-icon"></icon>
                            </span>
                            <div class="d-flex">
                              <span class="fs-xl text mx-2">当前情况</span>
                            </div>
                          </div>
                          <div class="box-item-content">
                            <dv-scroll-board class="dv-scr-board" :config="config2" />
                          </div>
                        </div>
                      </div>
                    </dv-border-box-13>
                  </div>
                  <div class="leftItem">
                    <dv-border-box-13>
                      <div class="box-item">
                        <div class="bg-color-black">
                          <div class="d-flex pt-2 pl-2">
                            <span>
                              <icon name="chart-line" class="text-icon"></icon>
                            </span>
                            <div class="d-flex">
                              <span class="fs-xl text mx-2">历史回顾</span>
                            </div>
                          </div>
                          <div class="box-item-content">
                            <dv-scroll-board class="dv-scr-board" :config="config" />
                          </div>
                        </div>
                      </div>
                    </dv-border-box-13>
                  </div>
                </div>
                <div class="content-box-item">
                  <dv-border-box-12>
                    <center></center>
                  </dv-border-box-12>
                </div>
                <div class="content-box-item">
                  <div class="banner">
                    <dv-border-box-13>
                      <div class="box-item">
                        <div class="bg-color-black">
                          <div class="d-flex pt-2 pl-2">
                            <span>
                              <icon name="chart-line" class="text-icon"></icon>
                            </span>
                            <div class="d-flex">
                              <span class="fs-xl text mx-2">拍摄基地照片</span>
                            </div>
                          </div>
                          <div class="box-item-content">
                            <banner
                                :list="imgList"
                                >
                            </banner>
                          </div>
                        </div>
                      </div>
                    </dv-border-box-13>
                  </div>
                  <div class="rightItem">
                    <dv-border-box-13>
                      <centerRight2></centerRight2>
                    </dv-border-box-13>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-1>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import top from '../components/top'
import Banner from '@/components/banner'
// import ChartsMap from './map'
import centerLeft1 from './centerLeft1'
// import centerLeft2 from './centerLeft2'
// import centerRight1 from './centerRight1'
import center from './center'
import centerRight2 from './centerRight2'
// import center from './center'
// import bottomLeft from './bottomLeft'
// import bottomRight from './bottomRight'

export default {
  mixins: [ drawMixin ],
  data() {
    return {
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      titleItem: [
        {
          title: '在基地剧组数量(组)',
          number: {
            number: [3121],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '产业配置人员(人)',
          number: {
            number: [2123],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '基地工作人员数量(人)',
          number: {
            number: [2453],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
      ],
      config: {
        header: ['剧名', '导演','主演', '出品方'],
        data: [
          ['你好，李焕英', '贾玲', '贾玲、张小斐、沈腾、陈赫', '新丽传媒、华谊兄弟、横店影业'],
          ['送你一朵小红花', '韩廷', '易烊千玺、高亚麟、夏雨、岳云鹏', '联瑞影业、横店影业、腾讯影业'],
          ['金刚川', '管虎、郭帆、路阳', '张译、吴京、李九霄', '华谊兄弟、万达影视、新丽传媒、欢瑞世纪'],
          ['夺冠', '陈可辛', '巩俐、黄渤、吴刚', '阿里影业、联瑞影业、横店影业'],
          ['八佰', '管虎', '王干源、张译、姜武、黄志忠', '华谊兄弟、腾讯影业、阿里影业、伯乐影视'],
          ['流浪地球', '郭帆', '吴京、李光洁、吴孟达', '阿里影业、腾讯影业'],
          ['庆余年', '孙皓', '张若昀、李沁、陈道明、郭麒麟', '张若昀、李沁、陈道明、郭麒麟'],
          ['亮剑', '张前', '李幼斌、何政军、孙俪', '海润影视'],
          ['士兵突击', '康洪雷', '王宝强、陈思诚、段奕宏、张译', '华谊兄弟'],
          ['潜伏', '姜伟', '孙红雷、姚晨、沈傲君、祖峰', '青雨传媒'],
          ['甄嫖传', '郑晓龙', '孙俪、陈建斌、蔡少芬、李东学', '花儿影视'],
          ['智取威虎山', '徐克', '梁家辉、张涵予、林更新、余男', '博纳影业、万达影视'],
          ['琅琊榜', '孔笙', '胡歌、刘涛、王凯、靳东', '正午阳光'],
        ],
        rowNum: 4, //表格行数
        headerHeight: 35,
        columnWidth: [100, 70],
        align: ['center']
      },
      config2: {
        header: ['剧名', '导演','主演', '拍摄场景'],
        data: [
          ['长津湖2', '陈凯歌、徐克、林超贤', '吴京', '产业园 3棚、外景-六石'],
          ['楚留香', '张敏', '张智尧、樊少皇', '清明上河图、开封府'],
          ['公子贵姓', '王启蘅', '金沫夕、蒙恩、吴承泽', '外景-西溪A、竹隐山居'],
          ['广州十三行', '曹盾', '朱亚文、俞灏明、文咏珊', '广州街、明清宫苑'],
          ['无相之城', '曹振宇', '李俊辰、戴佳敏、黄奕斌', '广州街'],
          ['大唐狄公案', '文章', '周一围、王丽坤', '外景-西溪B、黑鹰山寨'],
          ['天下长河', '张挺', '罗晋、尹昉、黄志忠', '古民居 大夫第'],
          ['雪鹰领主', '李达超', '许凯、古力娜扎、白澎', '长征、恭城书院'],
          ['绣春刀无间炼狱', '姜炫亦', '李晨浩、美娜', '清明上河图、孙羊店'],
        ],
        rowNum: 4, //表格行数
        headerHeight: 35,
        columnWidth: [100, 70],
        align: ['center']
      },
      imgList: [
        {
          id: 1,
          text: '1',
          url: 'http://youimg1.c-ctrip.com/target/100211000000qwnrm3A9D.jpg'
        }, {
          id: 2,
          text: '2',
          url: 'http://dimg02.c-ctrip.com/images/tg/046/927/649/5c81963fc3034609bf3e7c14e5425756_R_1600_10000_Mtg_7.jpg'
        }, {
          id: 3,
          text: '3',
          url: 'https://dimg07.c-ctrip.com/images/100q12000000ta9lj8D81_C_1600_1200.jpg'
        }, {
          id: 4,
          text: '4',
          url: 'https://dimg01.c-ctrip.com/images/100g12000000t9nurDE20_C_1600_1200.jpg'
        }
      ],
    }
  },
  components: {
    Banner,
    top,
    // ChartsMap
    centerLeft1,
    // centerLeft2,
    // centerRight1,
    center,
    centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted() {
    this.cancelLoading()
    // setTimeout(() => {
    //   this.$refs.dvScroll2.onResize()
    // }, 5000)
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss">
@import '~@/assets/scss/index.scss';
</style>
<style lang="scss" scoped>
.contentBox {
  display: grid;
  grid-template-columns: 25% 50% 25%;

  .content-box-item {
    display: flex;
    flex-direction: column;
    .leftItem {
      flex: 1;
      border-radius: 10px;
      //height: 300px;
      .up {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .item {
          border-radius: 6px;
          padding-top: 8px;
          margin-top: 8px;
          width: 32%;
          height: 100px;
          .dv-dig-flop {
            width: 150px;
            height: 30px;
          }
        }
      }
    }

    .banner {
      height: 35%;
      border-radius: 10px;
    }

    .rightItem {
      height: 65%;
      border-radius: 10px;
    }
  }
  .box-item {
    height: 100%;
    padding: 16px;
    .bg-color-black {
      height: 100%;
      border-radius: 10px;
      .box-item-title {
        position: relative;
        height: 60px;
        line-height: 24px;
        padding: 25px 15px 10px;
        font-size: 14px;
      }

      .box-item-content {
        width:100%;
        height: calc(100% - 26px);
        //height: 274px;
        padding: 15px 0 15px;
        overflow: hidden;
      }
    }
  }

}
</style>
